<script setup lang="ts">
interface IProps {
  modelValue?: string;
  placeholder?: string;
  showAction?: boolean;
  clearable?: boolean;
  shape?: string;
  bgColor?: string;
}

const props = withDefaults(defineProps<IProps>(), {
  modelValue: '',
  placeholder: '搜索',
  showAction: false,
  clearable: true,
  shape: 'square',
  bgColor: '#f7f8fa',
});

const emit = defineEmits<{
  'update:modelValue': [value: string];
  search: [value: string];
  clear: [];
}>();

const localValue = computed({
  get: () => props.modelValue,
  set: (value: string) => emit('update:modelValue', value),
});

const focus = ref(false);
const searchKey = ref(0);
const handleSearch = () => {
  emit('search', localValue.value);
  searchKey.value++;

  focus.value = false;
  setTimeout(() => {
    focus.value = true; // 延迟恢复聚焦能力
  }, 100);
};

const handleClear = () => {
  emit('clear');
};
</script>

<template>
  <!-- <view class="bg-white px-3 py-10">
    <uv-search
      v-model="localValue"
      :clearable="clearable"
      :shape="shape"
      :bgColor="bgColor"
      :placeholder="placeholder"
      :showAction="showAction"
      @search="handleSearch"
      @clear="handleClear"
    />
  </view> -->
  <view class="bg-white px-1">
    <uni-search-bar
      v-model="localValue"
      :placeholder="placeholder"
      :bgColor="bgColor"
      cancelButton="none"
      @confirm="handleSearch"
      @clear="handleClear"
    ></uni-search-bar>
  </view>
</template>
